﻿        

        input::-webkit-input-placeholder {
            font-size: 1em;
            color: gray;
        }
        input:-moz-placeholder {
            font-size: 1em;
            color: gray;
        }
        input:-ms-input-placeholder {
            font-size: 1em;
            color: gray;
        }        

        #div_dbcake {
            position:relative;
            width: 100%;
            z-index:666;
            background: #808080 fixed;  
            display: none;
            background-repeat: repeat;
            background-size: 100%;
            overflow: hidden;
        }
        #div_dbcake_inner {
            position:absolute;
            top: 0;right: 0;left: 0;bottom: 0; 
            width: 100%;
            height:400px; 
            padding: 30% 10% 10% 10%;  
            text-align: center;
            color: white;
        }


        #div_dbacke_access {
            width: 100%;
            height: 100%;
        }
        #div_dbacke_access input {
            width: 80%;
            height: 12%;
            border-radius: 5px; 
            border: 1px solid rgba(185, 185, 185, 0.8);
            background-color: rgba(235, 235, 235, 0.8);
            margin: 20px auto 10px auto;
            text-align: center;
            font-family: "Microsoft YaHei";
            font-size: 1.2rem;  
            font-weight: 300;
            color: gray;
        }
        #div_dbacke_access h1 {
            color: #FFF5EE;
            font-size: 5rem;
            font-weight: 600;
            text-shadow: 0px 0px 10px rgb(245, 245, 245);
        }
        #div_dbacke_access #input_award_btn {
            display: none;
        }



        #div_dbcake_wish {
            display: none;
            padding: 0 5%;
        }
        #div_dbcake_wish ul {
            list-style: none;
            margin: 30px;
        }
        #div_dbcake_wish ul li {
            background-color: rgba(155,155,155,0.5);
            display: inline;
            margin: 20px 20px;
            padding: 10px 15px;
            font-size: 1.4em;
            border: 1px solid white;
            border-radius: 5px;
        }
        #div_wish_note {
            position: relative;
            margin: -80px auto;
            padding: 5% 0;
            width: 100%;
            height: 180px;
            text-align: center;
            background-color: white;
            border-radius: 5px;
            display: none;
            color: gray;
            font-size: 1.4em;
        }
        #div_wish_note_close {
            width: 40px; height: 40px;
            position: absolute;
            right: 20px;
            top: 20px;
        }

        #div_dbcake .div_dbcake_text {
            color: black;
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-style: italic;
            text-align: center;
            font-size: 1.1em;
            line-height: 1.5em;
        }
        #div_dbcake .div_dbcake_text h1 {
            font-size: 1.8em;
            line-height: 1.8em;
        }
        



        #div_dbcake_cake {
            width: 100%;
            /*height: 100%;*/
            display: none;
        }
        #svg_dbcake {
            display: block;
            position: relative;
            margin: -20em auto 0 auto;
        }

        /* ============================================== Candle
        */
        .velas {
            background: #ffffff;
            border-radius: 10px;
            position: absolute;
            top: 220px;
            left: 50%;
            margin-left: -2.5px;
            margin-top: -8.33333333px;
            width: 5px;
            height: 35px;
            -webkit-transform: translateY(-300px);
            -ms-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-animation: in 500ms 5s ease-out forwards;
            animation: in 500ms 5s ease-out forwards;
        }

        .velas:after,.velas:before {
            background: rgba(255, 0, 0, 0.4);
            content: "";
            position: absolute;
            width: 100%;
            height: 2.22222222px;
        }

        .velas:after {
            top: 25%;
            left: 0;
        }

        .velas:before {
            top: 45%;
            left: 0;
        }

        /* ============================================== Fire
        */
        .fuego {
            border-radius: 100%;
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -2.2px;
            width: 6.66666667px;
            height: 18px;
        }

        .fuego:nth-child(1) {
            -webkit-animation: fuego 2s 5.5s infinite;
            animation: fuego 2s 5.5s infinite;
        }

        .fuego:nth-child(2) {
            -webkit-animation: fuego 1.5s 5.5s infinite;
            animation: fuego 1.5s 5.5s infinite;
        }

        .fuego:nth-child(3) {
            -webkit-animation: fuego 1s 5.5s infinite;
            animation: fuego 1s 5.5s infinite;
        }

        .fuego:nth-child(4) {
            -webkit-animation: fuego 0.5s 5.5s infinite;
            animation: fuego 0.5s 5.5s infinite;
        }

        .fuego:nth-child(5) {
            -webkit-animation: fuego 0.2s 5.5s infinite;
            animation: fuego 0.2s 5.5s infinite;
        }

        /* ============================================== Animation Fire
        */
        @-webkit-keyframes fuego {
            0%, 100% {
                background: rgba(254, 248, 97, 0.5);
                -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
                box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
                -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
            }
            50% {
                background: rgba(255, 50, 0, 0.1);
                -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
                box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
                -webkit-transform: translateY(-20px) scale(0);
                transform: translateY(-20px) scale(0);
            }
        }
        @keyframes fuego {
            0%, 100% {
                background: rgba(254, 248, 97, 0.5);
                -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
                box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
                -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
            }
            50% {
                background: rgba(255, 50, 0, 0.1);
                -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
                box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
                -webkit-transform: translateY(-20px) scale(0);
                transform: translateY(-20px) scale(0);
            }
        }
        @-webkit-keyframes in {
            to {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
        @keyframes in {
            to {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            }
        }  